<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->
<div class="thead-container">
  <p class="name">{{ 'models.name' | translate }}</p>
  <p class="api-key">{{ 'models.api_key' | translate }}</p>
  <p class="type">{{ 'models.type' | translate }}</p>
  <p class="actions">{{ 'models.actions' | translate }}</p>
</div>
<table class="table" *ngIf="!isLoading" mat-table [dataSource]="data | modelSort" fixedLayout="true">
  <caption>
    {{
      'models.caption' | translate
    }}
  </caption>
  <ng-container matColumnDef="name">
    <td mat-cell *matCellDef="let element" class="name">
      <div class="content--wrapper">
        <span
          (click)="dashboard.emit(element)"
          class="content--wrapper_name"
          matTooltip="{{ element.name }}"
          matTooltipClass="top-arrow"
          [matTooltipDisabled]="disableToolTip(element.name)"
        >
          {{ element.name | truncate : 20 }}
        </span>
      </div>
    </td>
  </ng-container>
  <ng-container matColumnDef="apiKey">
    <td mat-cell *matCellDef="let element">
      <div class="content--wrapper">
        <div class="content--wrapper_key">
          <span class="key" (click)="dashboard.emit(element)">{{ element.apiKey }}</span>
          <button mat-icon-button [cdkCopyToClipboard]="element.apiKey">
            <mat-icon
              svgIcon="copy"
              matTooltip="{{ 'common.capital.copy' | translate }}"
              matTooltipClass="bottom-arrow"
              [matTooltipPosition]="'above'"
            ></mat-icon>
          </button>
        </div>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="type">
    <td mat-cell *matCellDef="let element">
      <div class="content--wrapper">
        <div class="content--wrapper_type">
          <span class="type" (click)="dashboard.emit(element)">{{ element.type | lowercase }}</span>
        </div>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <td mat-cell *matCellDef="let element">
      <div class="actions">
        <button mat-icon-button (click)="clone.emit(element)" *ngIf="userRole !== roleEnum.User">
          <mat-icon
            svgIcon="copy"
            matTooltip="{{ 'common.capital.clone' | translate }}"
            matTooltipClass="bottom-arrow"
            [matTooltipPosition]="'above'"
          ></mat-icon>
        </button>

        <button mat-icon-button *ngIf="userRole !== roleEnum.User" (click)="edit.emit(element)">
          <mat-icon
            svgIcon="edit"
            matTooltip="{{ 'common.capital.edit' | translate }}"
            matTooltipClass="bottom-arrow"
            [matTooltipPosition]="'above'"
          ></mat-icon>
        </button>

        <button
          mat-icon-button
          (click)="collection.emit(element)"
          matTooltip="{{ 'models.mange_collection' | translate }}"
          matTooltipClass="bottom-arrow"
          [matTooltipPosition]="'above'"
          *ngIf="element.type === types.Recognition"
        >
          <mat-icon svgIcon="face-icon"></mat-icon>
        </button>

        <button mat-icon-button (click)="test.emit(element)">
          <mat-icon
            svgIcon="play-icon"
            matTooltip="{{ 'common.capital.test' | translate }}"
            matTooltipClass="bottom-arrow"
            [matTooltipPosition]="'above'"
          ></mat-icon>
        </button>
      </div>
    </td>
  </ng-container>

  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<ng-container *ngIf="data.length < 1 && !isLoading">
  <div class="no-data-message">
    <mat-icon svgIcon="info_new" inline="true"></mat-icon>
    <p class="caption">{{ 'users.search.no_results' | translate }}</p>
  </div>
</ng-container>
